<template>
  <div class="tinymce-editor">
    <editor
      v-model="content"
      :init="editorInit"
      :disabled="disabled"
      @onChange="handleChange"
    ></editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";

export default {
  components: { Editor },
  props: {
    value: { type: String, default: "" },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      content: this.value,
      editorInit: {
        base_url: "/tinymce",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        icons_url: "/tinymce/icons/default/icons.js",
        content_css: "/tinymce/skins/content/default/content.css",
        height: 300,
        plugins: "image media table lists link",
        toolbar:
          "undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | table | image link",
        license_key: 'gpl', // 新增：GPL许可证
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          this.$axios
            .post("/api/upload/image", formData)
            .then((res) => {
              if (res.data.success) success(res.data.data.url);
              else failure("上传失败");
            })
            .catch((err) => failure("上传出错: " + err.message));
        },
      },
    };
  },
  watch: {
    value(newVal) {
      this.content = newVal;
    },
  },
  methods: {
    handleChange() {
      this.$emit("input", this.content);
      this.$emit("change", this.content);
    },
  },
  mounted() {
    tinymce.init({});
  },
};
</script>